<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="add" style="float: left"
          >添加</el-button
        ><el-button type="primary" @click="delAll" style="float: left"
          >批量删除</el-button
        >
      </el-form-item>
      <el-form-item label="用户人">
        <el-input
          v-model="formInline.UserInfoName"
          placeholder="用户人"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model="formInline.UserInfoPhone"
          placeholder="手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-input
          v-model="formInline.UserInfoDate"
          placeholder="生日"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="gettableData">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="UserInfoName" label="头像" width="180">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.UserImg"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="UserInfoName" label="用户人" width="180">
      </el-table-column>

      <el-table-column prop="UserInfoPhone" label="用户手机号" width="180">
      </el-table-column>
      <el-table-column label="用户性别">
        <template slot-scope="scope">
          {{ scope.row.UserInfoSex ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column label="用户生日">
        <template slot-scope="scope">
          {{ scope.row.UserInfoDate.substr(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="UserTypeName" label="角色" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="del(scope.row.MemberID)"
            >删除</el-button
          >
          <el-button type="primary" @click="upd(scope.row.MemberID)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageIndex"
      :page-sizes="[1, 2, 3, 4, 5, 6, 7]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount"
    >
    </el-pagination>
    <el-dialog title="新增用户" :visible.sync="RegisterView">
      <register-view @add-ok="addok"></register-view>
    </el-dialog>
  </div>
</template>
<script>
import RegisterView from "./RegisterView.vue";
import axios from "@/util/axios.js";
export default {
  components: {
    RegisterView,
  },
  data() {
    return {
      formInline: {
        UserInfoName: "",
        UserInfoPhone: "",
        UserInfoDate: "",
      },
      tableData: [],
      RegisterView: false,
      page: {
        pageSize: 3,
        pageIndex: 1,
        totalCount: 0,
      },
      ids:[]
    };
  },
  methods: {
    delAll(){
       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.put("api/Member/DelteAllRole" , this.ids).then((res) => {
            if (res.data.Code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.gettableData();
            }
          });
         
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
     this.ids=[];
      val.forEach((res)=>{
        this.ids.push(res.MemberID);

      })
    },
    upd(id) {
      this.$router.push({ name: "UserUpd", query: { id: id } });
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.put("api/Member/Delete?id=" + id).then((res) => {
            if (res.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.gettableData();
            }
          });
          axios.put("api/Member/DelteRole?id=" + id).then((res) => {
            if (res.data > 0) {
              this.gettableData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    add() {
      this.RegisterView = true;
    },
    addok() {
      this.$message("添加成功");
      this.gettableData();
      this.RegisterView = false;
    },
    gettableData() {
      let userinfo = localStorage.getItem("userinfo");
      if (userinfo == null) {
        return;
      } else {
        axios
          .get(
            "api/Member/GetMembers?pageSize=" +
              this.page.pageSize +
              "&pageIndex=" +
              this.page.pageIndex +
              "&userinfoname=" +
              this.formInline.UserInfoName +
              "&useringophone=" +
              this.formInline.UserInfoPhone +
              "&userInfodate=" +
              this.formInline.UserInfoDate
          )
          .then((res) => {
            this.tableData = res.data.list;
            this.page.totalCount = res.data.totalCount;
          });
      }
    },
    handleSizeChange(res) {
      this.page.pageSize = res;
      this.gettableData();
    },
    handleCurrentChange(res) {
      this.page.pageIndex = res;
      this.gettableData();
    },
  },
  created() {
    this.gettableData();
  },
};
</script>
<style>
</style>